<template>
    <view class="m-next-card">
		<view  class="_bg_middle">
			<text class="_middle_title">
				{{middleTitle}}
			</text>
			<text class="_middle_page">
				{{getMiddlePage}}
			</text>
			<text class="_middle_tost">
				{{middleTost}}
			</text>
			<m-card @click="tapSelect" :cardList='cardList0' v-if="getCurrentIndex === 1" :current="select"/>
			<m-card @click="tapSelect" :cardList="cardList1" v-if="getCurrentIndex === 2" :current="select"/>
			<m-card @click="tapSelect" :cardList="cardList2" v-if="getCurrentIndex === 3" :current="select"/>
		</view>
		<view class="_next">
			<mBtnCs class="_lbtn" text="确定" @tap="tapNext" v-if="getCurrentIndex < 3 && getCurrent <= 3"/>
			<mBtnCs class="_lbtn" text="下一组" @tap="tapNextSelect" v-if="getCurrent < 3 && getCurrentIndex == 3"/>
			<mBtnCs class="_lbtn" text="查看结果" @tap="tapResult" v-if="getCurrent == 3 && getCurrentIndex == 3"/>
		</view>
    </view>
</template>

<script>
	import mCard from "../m-card/m-card.vue"
	import mBtnCs from '@/components/m-btn/m-btn-cs.vue'
    export default {
		components:{mCard,mBtnCs},
		props:{
			middlePage:{
				type:String,
				default:'/3'
			},
			middleTitle:{
				type:String,
				default:''
			},
			middleTost:{
				type:String,
				default:'摒弃杂念选择一个数字'
			},
			cardList0:{
				type:Array,
				default:()=>{
					return [
						{
							defaultCard:'../../static/img/card_def_one.png',
							activeCard:'../../static/img/card_act_one.png'
						},{
							defaultCard:'../../static/img/card_def_two.png',
							activeCard:'../../static/img/card_act_two.png'
						}
					]
				}
			},
			cardList1:{
				type:Array,
				default:()=>{
					return [
						{
							defaultCard:'../../static/img/card_def_one.png',
							activeCard:'../../static/img/card_act_one.png'
						},{
							defaultCard:'../../static/img/card_def_two.png',
							activeCard:'../../static/img/card_act_two.png'
						}
					]
				}
			},
			cardList2:{
				type:Array,
				default:()=>{
					return [
						{
							defaultCard:'../../static/img/card_def_one.png',
							activeCard:'../../static/img/card_act_one.png'
						},{
							defaultCard:'../../static/img/card_def_two.png',
							activeCard:'../../static/img/card_act_two.png'
						},{
							defaultCard:'../../static/img/card_def_three.png',
							activeCard:'../../static/img/card_act_three.png'
						},{
							defaultCard:'../../static/img/card_def_four.png',
							activeCard:'../../static/img/card_act_four.png'
						},{
							defaultCard:'../../static/img/card_def_five.png',
							activeCard:'../../static/img/card_act_five.png'
						},{
							defaultCard:'../../static/img/card_def_six.png',
							activeCard:'../../static/img/card_act_six.png'
						},{
							defaultCard:'../../static/img/card_def_seven.png',
							activeCard:'../../static/img/card_act_seven.png'
						},{
							defaultCard:'../../static/img/card_def_et.png',
							activeCard:'../../static/img/card_act_et.png'
						},{
							defaultCard:'../../static/img/card_def_nin.png',
							activeCard:'../../static/img/card_act_nin.png'
						},{
							defaultCard:'../../static/img/card_def_ten.png',
							activeCard:'../../static/img/card_act_ten.png'
						}
					]
				}
			},
			// 当前索引
			currindex:{
				type:Number,
				default:1
			},
			// 当前进行到第几步骤
			current:{ //标识
				type:Number,
				default:1
			},
			btnText:{ //按钮提示
				type:String,
				default:"确定"
			},
			itemList:{ //存储每轮选择的数字组合
				type:String,
				default:''
			},
			itemSelect:{
				type:Array,
				default:()=>{
					return []
				}
			},
			preRes:{
				type:String,
				default:''
			},
			itemRes:{
				type:Array,
				default:()=>{
					return []
				}
			},
			select:{
				type:Number,
				default:-1
			}
		},
		data(){
			return{
				text:'请从1-5里选择一个数字'
			}
		},
        onLoad() {
        },
		methods:{
			tapSelect(e){
				this.$emit('tapSelect',e)
			},
			tapNext(){
				this.$emit('tapNext',{
					'currindex':this.currindex
				})
			},
			tapNextSelect(){
				this.$emit('tapNextSelect')
			},
			tapResult(){
				this.$emit('tapResult')
			}
		},
		computed:{
			getMiddlePage(){
				return this.currindex+this.middlePage
			},
			getCurrent(){
				return this.current
			},
			getCurrentIndex(){
				return this.currindex
			}
		}
		
    }
</script>

<style lang="scss">
	.m-next-card{
		padding: 0upx;
		height:100%;
		position: relative;
		display:flex;
		justify-content:center;
		
		._bg{
			width: 100%;
			height:100%;
			vertical-align: top;
			top: 0;
			right: 0;
			position:absolute;
			vertical-align: middle;
		}
		
		._label_top{
			display:flex;
			width:100%;
			top:25upx;
			height:auto;
			position:relative;
			justify-content:center;

			._btn_top{
				height:185upx;
				width: 50%;
			}
			
			._lab_top{
				z-index:3;
				color:white;
				width:30%;
				text-align:center;
				justify-content:center;
				align-items:center;
				position:absolute;
				display:flex;
				margin:auto;
				height:100%;
			}
		}
		
		._bg_middle{
			width:100%;
			height:20%;
			position:absolute;
			z-index:7;
			margin:auto;
			justify-content:center;
			vertical-align:middle;
			align-items:center;
			display:flex;
			margin-top:85upx;
			color: white;
			
			._middle_title{
				font-size:13pt;
				width:100%;
				position:absolute;
				margin-top:1rpx;
				text-align:center;
			}
			._middle_page{
				width:100%;
				position:absolute;
				font-size:9pt;
				margin-top:40rpx;
				text-align:center;
			}
			._middle_tost{
				width:100%;
				position:absolute;
				font-size:8pt;
				margin-top:80rpx;
				text-align:center;
				display:inline-block;
			}
			
			m-card{
				width:100%;
			}
		}
		
		._next{
			width:50%;
			margin:auto;
			position:absolute;
			margin-top: 775upx;
			z-index: 10;
			
			._tost{
				color:white;
				font-size:8pt;
				text-align:center;
				position:relative;
				display:flex;
				margin-top:25upx;
			}
		}
	}
</style>
